<template>
	<view class="content">
		<!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++顶部组件 -->
		<view class="topbar">
			<view class="top-row">
				<view v-if="searchisshow" class="searchview">
					<uni-easyinput prefixIcon="search" focus placeholder="请输入内容" @input="input"
						@confirm="onSearchConfirm" v-model="searchValue"></uni-easyinput>
					<button class="searchbtn" @click="cancelsearch">取消</button>
				</view>
				<uni-row class="row1" v-else>
					<uni-col :span="17">
						<span @click="showpopup">全部工单▶</span>
					</uni-col>
					<uni-col :span="6">
						<uni-icons class="icons" type="search" size="30" @click="showsearch"></uni-icons>
						<uni-icons class="icons" type="settings" size="30" @click="showbottompopup"></uni-icons>
						<uni-icons class="icons" type="wallet" size="30" @click="showbottomsearchpopup"></uni-icons>
					</uni-col>
				</uni-row>
			</view>
			<view class="top-row row2">
				<uni-row>
					<uni-col :span="6" v-for="(item, index) in buttons" :key="index">
						<button class='topbtn'
							:style="{ backgroundColor: item.selected ? 'blue' : '',color: item.selected ? '#FFFFFF' : '#000000'   }"
							@click="selectButton(index)">
							{{ item.label }}{{ item.count !== undefined ? item.count : '' }}
						</button>
					</uni-col>
				</uni-row>
			</view>
		</view>
		<!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++工单卡片 -->
		<view class="mycard">
			<uni-row class="cardtitle">
				<uni-col :span="18">
					<text>主标题</text>
				</uni-col>
				<uni-col :span="6">
					<text>额外信息</text>
				</uni-col>
			</uni-row>
			<uni-forms ref="baseForm" :modelValue="baseFormData">
				<uni-forms-item label="姓名" required>
					<view class="form-item-content">
					    <text>{{ baseFormData.name }}</text>
					  </view>
				</uni-forms-item>
			</uni-forms>
		</view>
		<!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++弹窗组件 -->
		<view>
			<!-- 顶部选择弹窗 -->
			<uni-popup ref="toppopup" background-color="#fff" type="top">
				<view class="popup-content top">
					<view v-for="(item, index) in list" :key="index" @click="handleItemClick(item)" class="row-item">
						<text class="text">{{ item.text }}</text>
						<text class="text">{{ item.checked }}</text>
					</view>
				</view>
			</uni-popup>

			<!-- 底部排序弹窗 -->
			<uni-popup ref="bottompopup" background-color="#fff" type="bottom">
				<view class="popup-content bottom">
					<view>
						<text class="popuptitle">排序</text>
					</view>
					<view v-for="(item, index) in sortlist" :key="index" @click="handleItemClick(item)"
						class="row-item">
						<text class="text">{{ item.text }}</text>
						<view>
							<text class="sortbtn">升序</text>
							<text class="sortbtn">降序</text>
						</view>
					</view>
				</view>
			</uni-popup>

			<!-- 底部筛选弹窗 -->
			<uni-popup ref="bottomsearchpopup" background-color="#fff" type="bottom">
				<view class="popup-content bottomfilter">
					<view>
						<text class="popuptitle">筛选</text>
					</view>
					<view v-for="(item, index) in filterlist" :key="index" @click="handleItemClick(item)"
						class="row-item">
						<text class="text">{{ item.text }}</text>
						<view>
							<text class="sortbtn">{{ item.filter }}</text>
							<text class="sortbtn">{{ item.filter2 }}</text>
						</view>
					</view>

				</view>
				<view class="bottombtns">
					<button class="bottombtn">取消</button>
					<button class="bottombtn">确定</button>
				</view>
			</uni-popup>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				list: [{
						text: '全部工单',
						checked: '√'
					},
					{
						text: '未开始',
						checked: '√'
					},
					{
						text: '进行中',
						checked: '√'
					},
					{
						text: '已结束',
						checked: '√'
					},
					{
						text: '排产',
						checked: '√'
					}
				],
				sortlist: [{
					text: '工单编号',
				}, {
					text: '产品名称',
				}, {
					text: '产品规格',
				}, {
					text: '创建时间',
				}, {
					text: '计划开始时间',
				}, {
					text: '计划结束时间',
				}, ],
				filterlist: [{
					text: '基础筛选',
					filter: '加急',
					filter2: '已超时',
				}, {
					text: '计划开始时间',
					filter: '今天',
					filter2: '昨天',
				}, {
					text: '计划结束时间',
					filter: '今天',
					filter2: '昨天',
				}, {
					text: '实际开始时间',
					filter: '今天',
					filter2: '昨天',
				}, {
					text: '实际结束时间',
					filter: '今天',
					filter2: '昨天',
				}],
				searchisshow: false,
				searchValue: '',
				buttons: [{
						label: '全部',
						selected: true
					},
					{
						label: '未开始',
						count: 0,
						selected: false
					},
					{
						label: '进行中',
						count: 16,
						selected: false
					},
					{
						label: '已结束',
						count: 2,
						selected: false
					}
				],
				baseFormData: {
					name:'张三'
				}
			}
		},
		methods: {
			selectButton(index) {
				this.buttons.forEach((btn, i) => {
					btn.selected = i === index;
				});
				console.log(index)
			},
			showpopup() {
				console.log('propup')
				this.$refs.toppopup.open(); // 打开弹窗
			},
			handleItemClick(item) {
				console.log('点击的项：', item.text); // 只打印第一个 text 的内容
				// 你可以在这里做其他逻辑，比如跳转、筛选等
			},
			showsearch() {
				this.searchisshow = true
			},
			cancelsearch() {
				this.searchisshow = false
			},
			// 回车/确认键按下时触发
			onSearchConfirm(value) {
				console.log('用户按下了回车键，搜索内容：', value);
				this.searchisshow = false
			},
			showbottompopup() {
				this.$refs.bottompopup.open();
			},
			showbottomsearchpopup() {
				this.$refs.bottomsearchpopup.open();
			},

		}
	}
</script>

<style scoped>
	.topbar {
		background-color: aliceblue;
		height: 200rpx;
		padding: 20rpx;
	}


	.row2 {
		margin-top: 30rpx;

	}

	.icons {
		margin-right: 10rpx;
	}

	.topbtn {
		width: 80%;
		/* 关键：撑满父容器 */
		font-size: 25rpx;
		border: 1px solid black;
		border-radius: 30rpx;
		background-color: #f5f5f5;
		color: #333;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0;
		/* 清除默认内边距 */
		margin: 10rpx 0;
		/* 垂直间距，避免上下贴太近 */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.popup-content {
		height: 25vh;
		width: 100%;
		display: flex;
		flex-direction: column;
		/* 垂直排列 */
		/* justify-content: center; */
		/* 子项拉伸占满宽度 */
		background-color: #fff;
		padding: 0 30rpx;
		/* 左右边距，避免贴边 */
		box-sizing: border-box;
		border-radius: 20rpx;
		padding-bottom: 80rpx;
	}

	.popup-content.top {
		margin-top: 50rpx;
	}

	.popup-content.bottom {
		height: 50vh;
		padding-top: 20rpx;

	}

	.popup-content.bottomfilter {
		height: 37vh;
		padding-top: 20rpx;


	}

	.bottombtns {
		display: flex;
		margin-bottom: 120rpx;
	}

	.bottombtn {
		flex: 1;
		margin: 0 10rpx;
		font-size: 30rpx;
	}

	/* 每一行的样式 */
	.popup-content view {
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		/* 左右分布：文字在左，√在右 */
		align-items: center;
		height: 60rpx;
		border-bottom: 1rpx solid #eee;
		/* 可选：加分割线 */
		font-size: 28rpx;
		color: #333;
	}

	.text {
		font-size: 30rpx;
		color: #333;
	}

	.searchview {
		display: flex;
		height: 60rpx;
	}

	.searchbtn {
		height: 75rpx;
		line-height: 75rpx;
		font-size: 30rpx;
		padding: 10;
		align-items: center;
		justify-content: center;
	}

	.sortbtn {
		font-size: 26rpx;
		color: #007AFF;
		/* 文字颜色 */
		padding: 8rpx 16rpx;
		/* 内边距，控制大小 */
		border: 1rpx solid #007AFF;
		/* 边框：1像素，蓝色 */
		border-radius: 30rpx;
		/* 圆角：30rpx 推荐，胶囊形状 */
		margin-left: 20rpx;
		/* 两个按钮之间加点间距 */
		background-color: #f0f8ff;
		/* 可选：轻微背景色 */
	}

	/* 点击时的反馈效果 */
	.sortbtn:active {
		background-color: #007AFF;
		color: #fff;
		transform: scale(0.98);
	}

	/* 可选：给第一个按钮（升序）左边距清零 */
	.sortbtn:first-child {
		margin-left: 0;
	}

	.popuptitle {
		font-size: 40rpx;
		margin-left: 300rpx;
		margin-bottom: 10rpx;

	}

	.mycard {
		height: 32vh;
		margin: 20rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
	}

	.cardtitle {
		border-bottom: 1rpx solid #eee;
		padding-bottom: 20rpx;
	}
	.form-item-content {
	  display: flex;
	  align-items: center;         /* 垂直居中 */
	  height: 100%;                /* 撑满高度 */
	  font-size: 14px;             /* 可选：统一字体大小 */
	}
</style>